/**
 * 数据源列表
 */
import React from 'react';
import styles from '../../index.less';
import { connect, connectMaster} from 'umi';
import { Button, Space, Table } from 'antd';
import moment from 'moment';

import { getMasterCommonPkg } from '@/utils/masterData';
// const {
//   utils: {
//     otherUtil: { authorityVerify },
//   },
// } = getMasterCommonPkg();

@connectMaster //接收主服务数据
@connect(({ MyRole }) => ({
  MyRole,
}))
export default class extends React.Component {
  state = {
    btnType: '数据源权限',
  };
  componentDidMount = async () => {};

  // 点击查看数据源详情
  getDataDetail = async id => {
    let rs = await this.props.dispatch({
      type: 'MyRole/getDataDetail',
      payload: id,
      // payload:"1429736986923982848",
    });
    this.changeState({
      testId: id,
      // testId:"1429736986923982848"
    });
    if (rs.success) {
      this.changeState({
        dataPop: rs.data,
      });
    }
  };

  //更新状态
  changeState = obj => {
    this.props.dispatch({
      type: 'MyRole/setState',
      payload: obj,
    });
  };
  // 返回table列表
  renderTableData = (item, i) => {
    return {
      key: i,
      1: item.dataSourceType,
      2: item.dataSourceName,
      3: `${moment(item.startTime).format('YYYY-MM-DD HH:mm:ss')}——${moment(
        item.endTime,
      ).format('YYYY-MM-DD HH:mm:ss')}`,
      4: moment(item.applyTime).format('YYYY-MM-DD HH:mm:ss'),
      // 5: item.applyUserName,
      options: (
        <div>
          <Space size="middle">
            <a
              key={'view'}
              onClick={() => {
                this.changeState({
                  addVisible: true,
                  addVisibleModalType: 'dataSee',
                });
                // 获取数据源详情数据
                this.getDataDetail(item.dataSourceId);
              }}
            >
              查看
            </a>
          </Space>
        </div>
      ),
    };
  };

  render() {
    const columns = [
      { title: '数据源类型',  dataIndex: '1' },
      { title: '数据源名称',  dataIndex: '2' },
      { title: '权限有效期' ,width:"33%",  dataIndex: '3' },
      { title: '申请时间', width:"25%",dataIndex: '4' },
      // { title: '申请账号', width: 100, dataIndex: '5' },
      { title: '操作', width:"10%", dataIndex: 'options', fixed: 'right' },
    ];
    const { dataList, total, pageSize, pageNum } = this.props.MyRole;
    return (
      <div className={styles.TableContain}>
        {/* <div className={styles.applyBtn}>
          <Button
            type="primary"
            onClick={() => {
              if(!authorityVerify('APPLY_DATA_SOURCE')) return
              this.changeState({
                addVisible: true,
                addVisibleModalType: 'apply',
              });
            }}
          >
            权限申请
          </Button>
        </div> */}
        <div className={styles.TableList}>
          <div className={styles.total} style={{ left: '10px' }}>
            共{total}条记录 第 {pageNum} /
            {(() => {
              var num = parseInt(total / pageSize);
              if (total % pageSize != 0) num += 1;
              return num;
            })()}{' '}
            页
          </div>
          <Table
            columns={columns}
            dataSource={dataList.map((item, i) =>
              this.renderTableData(item, i),
            )}
            onChange={(pagination, filters, sorter) => {
              const {dataInput}=this.props.parentThis.state;
              // 获取父级方法
              const {getdataSoure}=this.props.parentThis;
              let {pageSize,current}=pagination;
              // 父组件方法
              getdataSoure(dataInput,current,pageSize)
            }}
            pagination={{
              showSizeChanger: true,
              showQuickJumper: true,
              current: pageNum,
              pageSize: pageSize,
              total: total,
            }}
          />
        </div>
      </div>
    );
  }
}
